<template>
  <div>
    <div
      style="font-size: 16px;font-weight: 500;color: #1D2129;margin-bottom: 16px;"
    >
      青少年体育经费
    </div>

    <div style="display: flex; ">
      <div style="width: 50%;">
        <div style="font-size: 26px;color: #41B776;">34,201</div>
        <div style="font-size: 12px;">经费总投入（万元）</div>
      </div>
      <div style="width: 50%;">
        <div style="font-size: 26px;color: #41B776;">34,201</div>
        <div style="font-size: 12px;">省体彩公益金总投入（万元）</div>
      </div>
    </div>

    <div
      style=" margin-top:50px; height:280px; width:100%;background: #F7F8FA;padding-top:20px;"
    >
      <div style="font-size: 14px;color: #0F0F0F;margin-left:17%;">
        经费从投入
      </div>
      <div
        style=" float: left; width:40%;height:180px;background:#E8F3FF; margin-left:25%;margin-top:40px; overflow: hidden;"
      ></div>
      <div ref="Chart1" style="width:100%;height:250px;margin-top:10px;"></div>
    </div>
    <div style="float:left;margin-top:-204px; margin-left:63%;">
      <div
        style="height:89px;border-left:20px solid #4E88F5;line-height:89px;padding-left:10px;overflow: hidden;"
      >
        <span style="color: #4E5969;"
          >省财政经费（不包含省体彩公益金） 600</span
        >
      </div>
      <div
        style="height:89px;border-left:20px solid #EEB74A;line-height:89px;margin-top:2px;padding-left:10px;"
      >
        <span style="color: #4E5969;">省体彩公益金年度投 400</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "SchoolType",
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    this.datalist();
  },

  methods: {
    datalist() {
      // 基于准备好的dom，初始化echarts实例
      this.Chart1 = echarts.init(this.$refs.Chart1);
      // 指定图表的配置项和数据
      const option1 = {
        //鼠标移入显示文字
        tooltip: {
          trigger: "item",
          formatter: "{a}:{b}:({d}%)"
        },

        //颜色设置
        color: ["#EEB74A", "#4E88F5"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            radius: [0, "73%"], //饼图大小设置
            center: ["30%", "48%"], // 距离左边，距离上边距离
            //数据文字内部展示
            label: {
              normal: {
                formatter: "{d}%",
                position: "inner",
                color: "#fff"
              }
            },
            //中间的白边设置
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 4,
                borderColor: "#fff"
              }
            },
            data: [
              {
                value: 38.3,
                name: "每天开放"
              },
              {
                value: 41.6,
                name: "节假日开放"
              }
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.Chart1.setOption(option1);

      // 监听父元素大小变化 刷新图表
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          this.Chart1.resize();
        }
      });
      // ro.observe(this.$refs.Chart1);
      ro.observe(this.$refs.Chart1);
    }
  }
};
</script>

<style scoped>
.dianidan {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  margin-top: 3px;
}
</style>
